<template>
    <div id="articles">
        <div class="articles">
            <div class="swiper-container articles-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-article" v-for="(item, index) in ranArticle" :key="index">
                        <h1 @click="show(item.id)">{{item.title}}</h1>
                        <img  :src="item.image"/>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination pagination-article"></div>
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="articles-tab">
                <ul class="a-tab-head">
                    <li v-for="(item, index) in tabs" class="a-t-h-item" :class="{'tab-select':currentTab==item.value}" :key="index"
                         @click="select_tab(index, item.value)">{{item.name}}</li>
                </ul>
                <div class="a-tab-body" :is="currentTab"></div>
            </div>

        </div>
        <articleRight></articleRight>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import articleRight from '@/components/article/right'
import articleAll from '@/components/article/all'
import articleFeel from '@/components/article/feel'
import https from '../../https'

export default {
  name: 'articles',
  components: {
    articleRight, articleAll, articleFeel
  },
  data () {
    return {
      currentTab: 'articleAll',
      tabs: [{
        name: '全部',
        value: 'articleAll'
      }, {
        name: '思考',
        value: 'articleRight'
      }],
      ranArticle: [],
      mySwiper: {}
    }
  },
  created () {
  },
  mounted () {
    https.fetchPost('/article/getByRan', {}).then((data) => {
      this.ranArticle = data.data.data
      /* this.mySwiper.startAutoplay()
      this.mySwiper.reLoop() */
      this.$nextTick(function () {
        /* eslint-disable no-new */
        this.mySwiper = new Swiper('.articles-swiper', {
          // spaceBetween: 30,
          loop: true,
          observer: true, // 修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, // 修改swiper的父元素时，自动初始化swiper
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          slidesPerView: 1,
          pagination: {
            el: '.pagination-article',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          onSlideChangeEnd: function (swiper) {
            swiper.update()
            this.mySwiper.startAutoplay()
            this.mySwiper.reLoop()
          }
        })
      })
    }).catch(err => function () {
      console.log(err)
    })
  },
  methods: {
    select_tab: function (index, item) {
      this.currentNumber = index
      this.currentTab = item
    },
    show: function (id) {
      this.$router.push({name: 'articleInfo', query: {id: id}})
    }
  }
}
</script>
<style scoped>
  #articles {
    width: 1100px;
    margin: 6rem auto;
  }

  .articles {
    width: 70%;
    float: left;
    margin-right: 2.5%;
  }

  .swiper-article {
    width: 700px;
    height: 400px;
  }

  .swiper-article img {
    width: 100%;
    height: 100%;
  }

  .swiper-article h1 {
    max-width: 750px;
    font: normal 1.5rem/2rem 微软雅黑;
    position: absolute;
    top: 300px;
    left: 60px;
    color: #fff;
    cursor: pointer;
  }

  .articles-tab {
    margin-bottom: 3rem;
  }

  .a-tab-head {
    margin: 1rem 0 0 0;
  }

  .a-t-h-item {
    font: 1.2rem/2rem sans-serif;
    /*display: inline-block;*/
    list-style: none;
    margin: 0;
    color: #fff;
    width: 50%;
    float: left;
    background-color: rgb(0, 0, 0, 0.2);
    cursor: pointer;
  }

  .a-t-h-item:hover {
    background-color: rgb(29, 205, 199);
  }

  .tab-select {
    background-color: rgb(29, 205, 199);
  }

  .a-tab-body {
    width: 100%;
    background-color: rgb(255, 255, 255, 0.6);
    margin-bottom: 3rem;
  }
</style>
